import Link from 'next/link';
import localFont from 'next/font/local'

const myFont = localFont({
    src: '../../public/font/MysteryQuest-Regular.ttf' });

export default function HeaderAndNav({ theme }) {
  return (
    <div className={theme === 'dark' ? 'bg-black' : 'bg-gray-100'}>
      <header className="p-4">
        <h1 className={`text-6xl font-bold text-center ${theme === 'dark' ? 'text-white' : 'text-black'} ${myFont.className}`}>DUDU BLOG</h1>
      </header>
      <nav className={`p-2 ${theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200'}`}>
        <ul className="flex justify-center items-center space-x-8">
          <li><Link href="/" className={`${theme === 'dark' ? 'text-white' : 'text-black'} font-semibold`}>首页</Link></li>
          <li><Link href="/photos" className={`${theme === 'dark' ? 'text-white' : 'text-black'} font-semibold`}>照片</Link></li>
          <li><Link href="/videos" className={`${theme === 'dark' ? 'text-white' : 'text-black'} font-semibold`}>视频</Link></li>
          <li><Link href="/about" className={`${theme === 'dark' ? 'text-white' : 'text-black'} font-semibold`}>我</Link></li>
        </ul>
      </nav>
    </div>
  );
}
